<template>
  <div id="father">
      <router-view></router-view>

    <ul>
      <router-link tag="li" to="/home">首页</router-link>
      <router-link tag="li" to="/about">分类</router-link>
      <router-link tag="li" to="/gou">购物车</router-link>
      <router-link tag="li" to="/geren">个人</router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      active: 0,
    };
  },
  created() {},
  methods: {},
};
</script>

<style lang='scss' scoped>
#father{
    width: 100%;
    height: 100%;
    position: relative;
}
ul{
    width: 100%;
    height: 50px;
   background-color: white;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0px;
    border-top:1px solid #ccc;
    li{
        flex: 1;
        text-align: center;
    }
    li:hover{
        color: red;
    }
}
</style>